<!-- 在App.vue总要写三个标签，template负责html，script负责js，style负责样式 -->
<template>
  <div class="person">
    <span>{{ one }}</span>
    <h1>name:{{ two.name }}</h1>
    <h2>age:{{ two.age }}</h2>
    <br>
    <button @click="changeone">点击加1</button>
    <button @click="changename">修改名字</button>
    <button @click="changeage">修改年龄</button>
    <button @click="changepeolpe">修改整个人</button>
  </div>
</template>


<script>//加上setup就是语法糖，自动返回，但是组件名要另外写，通过name属性来设置
import { reactive, ref, toRef, toRefs, watch } from 'vue'
//js
  export default {
    name: 'Preson',
    setup() {
      let one = ref(0)
      let two = ref({
        name: 'zhangsan',
        age: 18
      })

      function changeone() {
        one.value += 1
      }

      function changename() {
        two.value.name += '-'
      }

      function changeage() {
        two.value.age += 1
      }

      function changepeolpe() {
        two.value = {name: '老不死', age: 10000}
      }
      const e = watch(one, (newValue) => {
        console.log(newValue)
        if(newValue > 5){
          e()
        }
      })

      watch(two, (newValue, oldValue) => {
        console.log('前后变化', newValue, oldValue)
      },{deep:true}) 
      return {one, two , changeone, changeage, changename, changepeolpe}
    }
  }
</script>


<style scoped> 
  .person {
    width: 100%;
    height: 100%;
    background-color: pink;
  }
</style>
